﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设计购物的数量</title>
</head>
<body>

    <div id="app">
        父组件：购买{{counter}}件
        <child v-bind:value="counter" v-on:update:value="counter=$event"></child>

    </div>

<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        }
    });
    vm.component('child', {
        data:function() {
            return {
                count: this.value
            }
        },
        props: {
            value: {
                type: Number,
                default: 0
            }
        },
        methods: {
            handleClick() {
                this.$emit("update:value", ++this.count)
            },
        },
        template: `
            <div>
                <span>子组件：购买{{value}}</span>
                <button v-on:click="handleClick">增加</button>    
            </div>
        `
    });
    vm.mount('#app');
</script>
</body>
</html>
